<template>
  <div class="m-page">
    <m-header title="综合看板"></m-header>
    <div class="m-body" v-if="showScreen">
      <m-row :gutter="20" class="floor1">
        <m-col :span="7">
          <m-row :gutter="20">
            <m-col :span="24">
              <purchaseAnalysis ref="purchaseAnalysisRef" name="采购分析" />
            </m-col>
            <m-col :span="24">
              <qualityManagement ref="qualityManagementRef" name="品质管理" />
            </m-col>
            <m-col :span="24">
              <equipmentManagement ref="equipmentManagementRef" name="设备管理" />
            </m-col>
          </m-row>
        </m-col>
        <m-col :span="10">
          <energyManagement ref="energyManagementRef" name="能耗管理" />
        </m-col>
        <m-col :span="7">
          <m-row :gutter="20">
            <m-col :span="24">
              <productManagement ref="productManagementRef" name="生产管理" />
            </m-col>
            <m-col :span="24">
              <productionInLastest7Days ref="productionInLastest7DaysRef" name="近7天产量" />
            </m-col>
            <m-col :span="24">
              <materialMatching ref="materialMatchingRef" name="物料配套" />
            </m-col>
          </m-row>
        </m-col>
      </m-row>
      <m-row :gutter="20" class="floor2">
        <m-col :span="7">
          <warehouseManagement ref="warehouseManagementRef" name="仓库管理" />
        </m-col>
        <m-col :span="10">
          <warnList ref="warnListRef" name="预警列表" />
        </m-col>
        <m-col :span="7">
          <distributionOfSupplierQualificationRate
            ref="distributionOfSupplierQualificationRateRef"
            name="供应商合格率分布"
          />
        </m-col>
      </m-row>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onUnmounted } from 'vue'
import { useFullScreenStore } from '@/stores/fullScreen'
import mHeader from '@/components/common/mHeader/index.vue'
// 采购分析
import purchaseAnalysis from './components/purchaseAnalysis/index.vue'
// 设备管理
import equipmentManagement from './components/equipmentManagement/index.vue'
// 预警列表
import warnList from './components/warnList/index.vue'
// 近7天产量
import productionInLastest7Days from './components/productionInLastest7Days/index.vue'
// 仓库管理
import warehouseManagement from './components/warehouseManagement/index.vue'
// 物料配套
import materialMatching from './components/materialMatching/index.vue'
// 供应商合格率分布
import distributionOfSupplierQualificationRate from './components/distributionOfSupplierQualificationRate/index.vue'
// 品质管理
import qualityManagement from './components/qualityManagement/index.vue'
// 生产管理
import productManagement from './components/productManagement/index.vue'
// 能耗管理
import energyManagement from './components/energyManagement/index.vue'

const fsStore = useFullScreenStore()
// console.log('fsStore', fsStore)
// 页面是否可显示 默认：true
const showScreen = ref(true)
watch(
  () => fsStore.isFullScreen,
  (n) => {
    console.log('isFullScreen ', n)
    showScreen.value = false
    setTimeout(() => {
      showScreen.value = true
    }, 300)
  }
  // { immediate: true }
)

const purchaseAnalysisRef = ref() // 采购分析
const qualityManagementRef = ref() // 品质管理
const equipmentManagementRef = ref() // 设备管理
const energyManagementRef = ref() // 能耗管理
const productManagementRef = ref() // 生产管理
const productionInLastest7DaysRef = ref() // 近7天产量
const materialMatchingRef = ref() // 物料配套
const warehouseManagementRef = ref() // 仓库管理
const warnListRef = ref() // 预警列表
const distributionOfSupplierQualificationRateRef = ref() // 供应商合格率分布
// 获取 页面实例
const that = getCurrentInstance()
// 定时器
let timer = null
onMounted(() => {
  // 10分钟刷新一次
  const dur = 1000 * 60 * 10
  timer = setInterval(() => {
    for (let i = 0; i < that.refs.length; i++) {
      const _ref = that.refs[i]
      _ref.value?.init()
    }
  }, dur)
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="less" scoped>
.m-page {
  .m-body {
    .m-row {
      margin-bottom: 0;
      &.floor1 {
        height: 70%;
        .m-col {
          height: 100%;
          padding: 0 !important;
          // border: 1px solid #ccc;
          .m-row {
            height: 33.333%;
          }
        }
      }
      &.floor2 {
        height: 30%;
        .m-col {
          height: 100%;
          // border: 1px solid #ccc;
          padding: 0 !important;
        }
      }
    }
  }
}
</style>
